import React, { useState, useEffect } from "react";
import { Form, Drawer, Button, message } from "antd";
import FormBuilder from 'antd-form-builder';
import { addModifyVideo } from "@/api/video";
import AvatarUploader from '@/components/Upload/Uploadavatar'
import { VIP_DEGREE, LANDSCAPE, VIDEO_LENGTH } from '@/utils/constant'
import CustomTag from './tag'


const EditForm = props => {
	const [form] = Form.useForm();
	const { onCancel, } = props;
	const [visible, setVisisble] = useState(props.visible)
	const [title, setTitle] = useState(props.title)
	const [editModalLoading, setEditModalLoading] = useState(false)
	const [editMode, setEditMode] = useState(false)
	const initurls = {
		coverUrl: '',
		iconUrl: ''
	};
	const [uploaderUrls, setUploaderUrls] = useState(initurls) // 上传组件默认显示

	const [tagIdList, setTagList] = useState([]);


	useEffect(() => {
		setTitle(props.title)
	}, [props.title])

	useEffect(() => {
		setVisisble(props.visible)
	}, [props.visible])


	useEffect(() => {
		setEditMode(props.editMode)
		setTagList(props.currentRowData.tagIdList || [])
		// 编辑回填内容 新增清空内容 
		const initValue = props.editMode ? {
			...props.currentRowData,
			size: (props.currentRowData.size / 1024).toFixed(2)
		} : {};
		form.setFieldsValue(initValue);
			// 设置回填上传组件默认路径
			setUploaderUrls({
				coverUrl: initValue.coverUrl,
				iconUrl: initValue.iconUrl
			});
	}, [props.currentRowData, props.editMode])


	// 取消，关闭抽屉 重置表单
	const handleCancel = () => {
		form.resetFields();
		setUploaderUrls(initurls)
		onCancel && onCancel();
	};

	// 验证通过 开始进行 新增/编辑 请求
	const handleSubmit = () => {
		let fieldsValue = form.getFieldsValue();
		setEditModalLoading(true)
		// 服务端要求的参数格式
		const params = {
			video: {
				id: editMode ? props.currentRowData.id : '',
				title: fieldsValue.title,
				duration: +fieldsValue.duration,
				storageLocation: fieldsValue.storageLocation,
				price: fieldsValue.price,
				vip: fieldsValue.vip,
				size: Math.floor(fieldsValue.size * 1024),
				description: fieldsValue.description,
				coverUrl: fieldsValue.coverUrl,
				iconUrl: fieldsValue.iconUrl,
				cateId: fieldsValue.cateId,
				isLandscape: fieldsValue.isLandscape,
				type: fieldsValue.type,
			},
			tagIdList: fieldsValue.tagIdList // to test
		}
		addModifyVideo(params).then(() => {
			message.success(`${editMode ? '编辑' : '新增'} 视频成功!`)
			handleCancel()
			props.onOk && props.onOk();
		}).catch(e => {
			message.error("错误，请重试!")
		}).finally(() => {
			setEditModalLoading(false)
		})
	};

	const formItemLayout = {
		labelCol: {
			sm: { span: 4 },
		},
		wrapperCol: {
			sm: { span: 16 },
		},
	};
	// 上传组件 封面 成功回调处理
	const handleUploadOk = coverUrl => {
		form.setFieldsValue({
			coverUrl
		})
	}

	// 上传组件 ICON图片 成功回调处理
	const handleUploadIconOk = iconUrl => {
		form.setFieldsValue({
			iconUrl
		})
	}

	// 视频标签选择变化
	const handleTagsChange = value => {
		form.setFieldsValue({
			tagIdList: value
		})
	};



	const meta = {
		columns: 2,
		fields: [
			{
				key: 'title',
				label: '视频标题',
				colSpan: 1,
			},
			{
				key: 'price',
				label: '视频积分价格',
				colSpan: 1,
			},
			{
				key: 'tagIdList',
				label: '视频标签',
				colSpan: 1,
				widget: CustomTag,
				widgetProps: { onChangeTags: handleTagsChange, tagIdList }
			},
			{
				key: 'cateId',
				label: '视频分类',
				placeholder: '为视频增加分类',
				widget: 'select',
				colSpan: 1,
				options: props.categoryList.map(v => {
					return {
						label: v.name,
						value: v.id
					}
				})
			},
			{
				key: 'description',
				label: '视频描述信息',
				widget: 'textarea',
				colSpan: 2
			},
			{
				key: 'size',
				label: '视频大小',
				colSpan: 1,
				widgetProps: {
					suffix: 'MB'
				}
			},
			{
				key: 'duration',
				label: '视频时长',
				colSpan: 1,
				widgetProps: {
					suffix: 'S'
				}
			},

			{ key: 'storageLocation', colSpan: 1, widget: 'textarea', label: '视频链接' },
			{
				key: 'isLandscape',
				label: '视频播放类型',
				placeholder: '请选择横屏或者竖屏',
				widget: 'select',
				colSpan: 1,
				options: [
					{
						label: LANDSCAPE[0],
						value: 0
					},
					{
						label: LANDSCAPE[1],
						value: 1
					}
				]
			},
			{ key: 'coverUrl', colSpan: 1, label: '视频封面', widget: AvatarUploader, widgetProps: { onUploadOk: handleUploadOk, avatar: uploaderUrls.coverUrl } },
			{ key: 'iconUrl', colSpan: 1, label: '视频图标', widget: AvatarUploader, widgetProps: { onUploadOk: handleUploadIconOk, avatar: uploaderUrls.iconUrl } },
		
			{
				key: 'vip',
				label: 'VIP Degree',
				widget: 'select',
				colSpan: 1,
				options: [
					{
						label: VIP_DEGREE[0],
						value: 0
					},
					{
						label: VIP_DEGREE[1],
						value: 1
					},
					{
						label: VIP_DEGREE[2],
						value: 2
					}
				]
			},
			{
				key: 'type',
				label: '视频类型',
				placeholder: '选择长视频或者短视频',
				widget: 'select',
				colSpan: 1,
				options: [
					{
						label: VIDEO_LENGTH[0],
						value: 0
					},
					{
						label: VIDEO_LENGTH[1],
						value: 1
					}
				]
			}
		],
	}



	return (
		<Drawer
			title={title}
			visible={visible}
			width={800}
			maskClosable={false}
			placement="right"
			getContainer={false}
			onClose={handleCancel}
		>
			<Form {...formItemLayout} form={form} onFinish={handleSubmit} >
				<FormBuilder meta={meta} form={form} />
				<Form.Item>
					<Button type="primary" htmlType="submit" loading={editModalLoading} className="drawer-submit-button"> 提交 </Button>
				</Form.Item>
			</Form>
		</Drawer>
	);
}

export default EditForm;
